<template>
  <div class="activity-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功" style="padding-bottom: 50px;">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已加载全部"
        @load="onLoad"
        :immediate-check="false"
        class="list"
      >
        <van-card 
          v-for="(item, index) in activityList" 
          :thumb="item.photo"
          @click="handleDetail(item)" 
          class="card"
        >
          <template #title>
            <div class="title">
              <span class="ti">{{item.title}}</span>
            </div>
          </template>
          <template #desc>
            <div class="con">报名人数：{{item.signUpNum}}/{{item.numOfPeo}}</div>
            <div class="con">报名截止：{{dateFormat('YYYY-mm-dd HH:MM', new Date(item.stopSignUp))}}</div>
            <div class="con">
              服务点：
              <span v-for="(pl, plindex) in item.places">
                {{pl}}
                <span v-show="plindex+1 < item.places.length">/</span>
              </span>
            </div>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import service from '@/utils/request.js'
export default {
  props: ['listType', 'title'],
  data() {
    return {
      activityList: [],
      loading: false,
      finished: false,
      refreshing: false,
      searchData: {
        pageInt: 1,
        pageSize: 10,
        listType: this.listType,
        title: ''
      },
    }
  },
  watch: {
    title (val) {
      this.searchData.title = val
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      service({
        url: '/api/activity/getList',
        method: 'get',
        params: this.searchData
      }).then(re => {
        this.activityList.push.apply(this.activityList, re.data.list)

        this.loading = false
        this.refreshing = false

        if (this.activityList.length >= re.data.total) {
          this.finished = true
        } else {
          this.finished = false
        }
      })
    },
    onLoad() {
      // debugger
      if (this.refreshing) {
        return
      }
      this.searchData.pageInt++
      this.getList()
    },
    handleDetail(item) {
      this.$router.push({path: '/activityDetail', query: {id: item.id}})
    },
    
    onRefresh() {
      // debugger
      this.activityList = []
      this.searchData.pageInt = 1
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getList();
    },
  }
}
</script>
<style lang="scss" scoped>

.activity-list {
  .title {
    margin-bottom: 10px;
    .ti {
      font-size: 16px;
      display: -webkit-box;
      -webkit-line-clamp:2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      font-weight: bold;

    }
  }
  .con {
    font-size: 14px;
    color: gray;
  }
}

</style>